<script lang="ts" setup>
import { useRoute } from "vue-router";
import {onMounted, ref, watch} from "vue"
import { requestSingerDetail } from "../../utils/axiosURL"
import indexText from "./index.json"
import userChartShowState from "../../store/chartExample";
import useSingerID from "../../store/singerID";
import {storeToRefs} from "pinia";
const chartShowStateFn = userChartShowState()
const use_singerID = useSingerID()
const { state } = storeToRefs(userChartShowState())
const { passedID } = storeToRefs(useSingerID())
const route = useRoute()


// 歌手的 id
const singerID = ref<any>(route.params.id)
// 存储歌手详情数据
const saveSingerDetail = ref<any>({})
// 子路由下标
let childIndex = ref<number>(0)

// 获取歌手详情
const requestSingerDetailFn = () => {
  requestSingerDetail(singerID.value).then(({data}: any) => {
    saveSingerDetail.value = data.artist;
  }).catch(_ => { })
}

const changIDFn = (index: number) => {
  childIndex.value = index
  use_singerID.change(passedID)
}

onMounted(() => {
  use_singerID.change(route.params.id)
  requestSingerDetailFn()
})

watch(passedID, () => {
  childIndex.value = 0
  singerID.value = passedID.value
  requestSingerDetailFn()
})


</script>

<template>
  <div class="singerWrap">
    <div class="singerDetail" v-if="Object.keys(saveSingerDetail).length !== 0">
      <div class="leftImg">
        <img :src="`${saveSingerDetail?.cover}`" alt="">
      </div>
      <div class="rightInfo">
        <p class="singerName">{{ saveSingerDetail?.name }}</p>
        <p class="singerName_en" v-if="saveSingerDetail?.alias.length">
          <span v-for="item in saveSingerDetail?.alias">{{ item }}</span>
        </p>
        <div class="collectionAll">
          <span class="iconfont icon-wj-wjj"></span>
          <span>{{ indexText.collection }}</span>
        </div>
        <p class="moreNum">
          <span>{{ indexText.Number_of_singles }}: {{ saveSingerDetail?.musicSize }}</span>
          <span>{{ indexText.AlbumCount }}: {{ saveSingerDetail?.albumSize }}</span>
          <span>{{ indexText.MVCount }}: {{ saveSingerDetail?.mvSize }}</span>
        </p>
      </div>
    </div>
    <songListDynamicSkeleton v-else />
    <div class="navChild">
      <ul class="childNavBox">
        <li
            v-for="(item, index) in indexText.childNav"
            @click="() => changIDFn(index)"
            :class="index === childIndex ? 'active' : ''"
        >
          <RouterLink :to="{path: item.to, query: { id: passedID }}">
            {{ item.name }}
          </RouterLink>
        </li>
      </ul>
      <ul class="charts" v-if="childIndex === 0">
        <span @click="() => chartShowStateFn.changeState(0)" :class="`${state === 0 ? 'chartActive' : ''}`" title="大图展示"
              class="iconfont icon-dasuolvetuliebiao"></span>
        <span @click="() => chartShowStateFn.changeState(1)" :class="`${state === 1 ? 'chartActive' : ''}`" title="列表展示"
              class="iconfont icon-danlieliebiao"></span>
        <span @click="() => chartShowStateFn.changeState(2)" :class="`${state === 2 ? 'chartActive' : ''}`" title="图列展示"
              class="iconfont icon-relituliebiao"></span>
      </ul>
    </div>
    <RouterView />
  </div>
</template>

<style lang="scss" scoped>
.singerWrap {
  @extend .pageWrapSize;

  .singerDetail {
    display: flex;
    width: 100%;
    height: 230px;

    .leftImg {
      position: relative;
      flex-basis: 230px;
      height: 230px;

      img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 180px;
        height: 180px;
        border-radius: 8px;
      }
    }

    .rightInfo {
      flex: 1;
      padding: 28px 0;
      box-sizing: border-box;

      .singerName {
        font-size: $font-size-lg2;
        font-family: $activeTextFont;
        margin-bottom: 15px;
      }

      .singerName_en {
        font-family: $textFont;
        font-size: $font-size-sm;
        color: $font_main_color;
        margin-bottom: 15px;

        span {
          margin-right: 15px;
        }
      }

      .collectionAll {
        width: fit-content;
        border-radius: 25px;
        padding: 4px 15px;
        border: 1px solid $lineColor;
        color: $font_main_color;
        margin-bottom: 15px;

        span {
          font-family: $activeTextFont;
          &:nth-child(1) {
            margin-right: 6px;
          }
        }
      }

      .moreNum {
        font-size: $font-size-sm;
        font-family: $activeTextFont;

        span:nth-child(2) {
          margin: 18px;
        }
      }
    }
  }

  .navChild {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 30px;
    padding-left: 30px;
    box-sizing: border-box;

    .childNavBox {
      flex-basis: 600px;
      display: flex;

      li {
        margin-right: 20px;
        line-height: 30px;
        font-size: 15px;
        font-family: $textFont;
      }

      .active {
        position: relative;
        font-size: $font-size-lg;
        font-family: $activeTextFont;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 3px;
          @include background_color('bk_color');
        }
      }
    }

    .charts {
      display: flex;
      justify-content: space-between;
      margin-right: 20px;
      border-radius: 4px;
      overflow: hidden;

      span {
        font-size: $font-size-xs;
        color: $font_second_color;
        padding: 4px 8px;
        background-color: rgb(242, 242, 242);
      }

      .chartActive {
        background-color: rgb(191, 191, 191);
        color: $theme-white;
      }
    }
  }
}
</style>
